<template>
  <div class="add-plan-terminal-dialog">

    <el-dialog
      v-model="dialogVisible"
      title="添加营销任务中终端"
      width="1000px"
      :before-close="handleClose"
    >

      <el-form :inline="true" :model="screendData" label-position="right" size="small">

        <el-form-item label="招商规划名称">
          <el-input v-model="screendData.planName" placeholder="请输入招商规划名称" />
        </el-form-item>

        <el-form-item label="终端地区">
          <el-cascader ref="cascader" v-model="screendData.areas" :options="area" :props="props1" placeholder="请选择地区" collapse-tags clearable @change="areaChange" />
        </el-form-item>

        <el-form-item label="终端名称">
          <el-input v-model="screendData.terminalName" placeholder="请输入终端名称" />
        </el-form-item>

        <el-form-item>
          <el-button type="primary" size="small" plain @click="getTerminal">查询</el-button>
        </el-form-item>

      </el-form>

      <el-table
        max-height="350"
        border
        header-cell-class-name="table-header"
        :data="tableData"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" :selectable="selectable" />
        <el-table-column header-align="center" align="center" label="终端名称" prop="terminalName" show-overflow-tooltip />
        <el-table-column header-align="center" align="center" label="所在地区" prop="area" show-overflow-tooltip/>
        <el-table-column header-align="center" align="center" label="适用终端" prop="type">
          <template #default="scope">
            {{ getLabel('app_mode',scope.row.terminalType) }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="开发期限至">
          <template #default="scope">
            {{ dateFormat('yyyy-mm-dd',scope.row.expireTime) }}
          </template>
        </el-table-column>

        <el-table-column header-align="center" align="center" label="开发保证金(元)" width="130">
          <template #default="scope">
            {{ scope.row.devEarnestMoney }}
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="最低销量">
          <template #default="scope">
            <span v-if="scope.row.minSale">{{ scope.row.minSale }}{{ getLabel('sell_unit',scope.row.sellUnit) }}/{{ getLabel('sell_num_unit',scope.row.minSaleUnit) }}</span>
            <span v-else>未设置</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="销量保证金(元)" width="130">
          <template #default="scope">
            <span v-if="scope.row.sellEarnestMoney">{{ scope.row.sellEarnestMoney }}</span>
            <span v-else>未设置</span>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="招商规划" prop="planName" show-overflow-tooltip />

      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="dialogConfirm">添加至列表</el-button>
        </div>
      </template>
    </el-dialog>

  </div>
</template>

<script>
import {InfoFilled} from '@element-plus/icons'
import {defineComponent, getCurrentInstance, inject, reactive, toRefs} from 'vue'

export default defineComponent({
  name: 'Index',
  components: { InfoFilled },
  props: {
    area: {
      type: Array,
      default: []
    },
    list: {
      type: Array,
      default: []
    },
    agentProduct: {
      type: Object,
      default: {}
    }
  },
  setup(props, { emit }) {
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const props1 = reactive({ multiple: true, expandTrigger: 'hover', label: 'regionName', value: 'regionCode' })

    var data = reactive({
      screendData: {
        productId: 0,
        planName: '',
        terminalName: '',
        terminalType: '',
        areaSelectType:true,
        headId:0,
        region: '',
        areas: []
      },
      tableData: [],
      dialogVisible: false,
      cascader: null,
      selects: []
    })

    const dialogConfirm = () => {
      if (!data.selects.length) {
        currentInstance.proxy.customMessage({
          type: 'error',
          message: '请选择终端',
        })
        return
      }
      const a = JSON.parse(JSON.stringify(data.selects))
      emit('confirm', a)

      data.dialogVisible = false
      setTimeout(() => {
        data.selects = []
        data.tableData = []
      }, 100)
    }

    const handleClose = () => {
      data.dialogVisible = false
    }

    const areaChange = (val) => {
      const serve = currentInstance.proxy.getServeAreaData(val, data.cascader.getCheckedNodes())
      data.screendData.region = serve
    }

    const getAreaCode = () => {
      const a = {
        provinceCode: [],
        cityCode: [],
        areaCode: []
      }
      for (let i = 0; i < data.screendData.areas.length; i++) {
        const area = data.screendData.areas[i]
        if (area[0]) {
          a.provinceCode.push(area[0])
        }
        if (area[1]) {
          a.cityCode.push(area[1])
        }
        if (area[2]) {
          a.areaCode.push(area[2])
        }
      }

      return a
    }

    const getTerminal = () => {
      const a = { ...data.screendData, ...getAreaCode() }
      a.areaSelectType = false
      api.task.TASK_ALLOCATION_SEARCH_TERMINAL(a).then(res => {
        if (!res.code && res.data) {
          data.tableData = res.data
          data.tableData.forEach(item => {
            const index = props.list.findIndex(a => a.terminalId == item.terminalId)
            if (index != -1) {
              item.disable = true
            }
            item.area = item.terProvinceName
            if (item.terCityName) {
              item.area = item.area + '/' + item.terCityName
            }
            if (item.terAreaName) {
              item.area = item.area + '/' + item.terAreaName
            }
          })
        }
      })
    }

    const openDialog = () => {
      data.screendData.terminalType = props.agentProduct.terminalType
      data.screendData.region = props.agentProduct.region
      data.screendData.productId = props.agentProduct.productId
      data.screendData.headId = props.agentProduct.headId
      getTerminal()
      data.dialogVisible = true
    }

    const handleSelectionChange = (val) => {
      data.selects = val
    }

    const selectable = (row) => {
      return !row.disable
    }

    return {
      ...toRefs(data),
      props1,

      handleClose,
      dialogConfirm,
      areaChange,
      openDialog,
      getTerminal,
      handleSelectionChange,
      selectable
    }
  }
})
</script>

<style scoped>

</style>
